<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Herbie Bootstrap 4 Template 3</title>
    <meta name="description" content="A free, open source Bootstrap 4 theme by Themes.guide" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Whootstrap">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="theme.css" />
    <link rel="stylesheet" href="template3.css" />
  </head>
<body data-spy="scroll" data-target="#navbar1" data-offset="60">
<div class="container-fluid">
    <div class="row">
        <div class="col-12 p-0 bg-primary vh-50 py-5">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-7 py-2 text-light">
                        <h1 class="display-3 mb-0">
                            <span>Herbie</span>
                        </h1>
                        <p class="lead mb-3 w-75"><span>Unique and stylish with a readable font.</span> <strong>Whoot!strap</strong> makes it easy to customize this, and other free Bootstrap 4 themes for your downloading pleasure.</p>
                        <a class="btn btn-outline-light btn-lg mr-2" href="http://whootstrap.themes.guide" target="_new">Customize</a> 
                        <a class="btn btn-outline-light btn-lg" href="theme.css" role="button">Download Theme</a> 
                    </div>
                    <div class="col-xl-6 col">
                       <div class="text-lg-right" title="Theme colors">
                           <h3>
                               <span class="badge badge-pill bg-secondary" title="secondary">&nbsp;</span>
                               <span class="badge badge-pill bg-success" title="success">&nbsp;</span>
                               <span class="badge badge-pill bg-danger" title="danger">&nbsp;</span>
                               <span class="badge badge-pill bg-info" title="info">&nbsp;</span>
                               <span class="badge badge-pill bg-warning" title="warning">&nbsp;</span>
                               <span class="badge badge-pill bg-light" title="light">&nbsp;</span>
                               <span class="badge badge-pill bg-dark" title="dark">&nbsp;</span>
                           </h3>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary" id="navbar1">
    <div class="container h-100">
        <a class="navbar-brand mr-1" href="http://themes.guide">Themes.guide</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="layoutDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Layouts
                    </a>
                    <div class="dropdown-menu" aria-labelledby="layoutDd">
                        <a class="dropdown-item px-2" href="./">Default</a>
                        <a class="dropdown-item px-2" href="./template2.html">Layout 2</a>
                        <a class="dropdown-item px-2" href="./template3.html">Layout 3</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#buttons">Buttons</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#navs">Navs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#cards">Cards</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#modals">Modals</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#typography">Typography</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#forms">Forms</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#grid">Grid</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      More
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDd">
                        <a class="dropdown-item px-2" href="#more">Badges</a>
                        <a class="dropdown-item px-2" href="#more">Tooltips &amp; Popups</a>
                        <a class="dropdown-item px-2" href="#more">Progress &amp; Alerts</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item px-2" href="#more">All</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>
<main>
    <section id="buttons" class="pb-5">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="pb-3">
                        <button type="button" class="btn btn-primary mr-1">Primary</button>
                        <button type="button" class="btn btn-outline-primary">Outline</button>
                    </div>
                    <div class="pb-3">
                        <button type="button" class="btn btn-primary align-bottom btn-lg mr-1">Large</button>
                        <button type="button" class="btn btn-primary align-bottom mr-1">Normal</button>
                        <button type="button" class="btn btn-primary align-bottom btn-sm mr-1">Small</button>
                        <a href="#" class="text-primary">Text</a>
                    </div>
                </div>
            </div>
            <div class="row py-2">
                <div class="col-md-auto col-3">
                    <button class="btn btn-outline-secondary mr-1">Secondary</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-outline-info mr-1">Info</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-outline-danger mr-1">Danger</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-outline-success mr-1">Success</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-outline-warning mr-1">Warning</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-outline-light mr-1">Light</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-outline-dark mr-1">Dark</button>
                </div>
            </div>
            <div class="row py-2">
                <div class="col-md-auto col-3">
                    <button class="btn btn-secondary mr-1">Secondary</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-info mr-1">Info</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-danger mr-1">Danger</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-success mr-1">Success</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-warning mr-1">Warning</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-light mr-1">Light</button>
                </div>
                <div class="col-md-auto col-3">
                    <button class="btn btn-dark mr-1">Dark</button>
                </div>
            </div>
        </div>
    </section>
    <section id="navs" class="container pb-5">
        <div class="row">
            <div class="col-xl-9 pb-4">
                <nav class="navbar navbar-expand-md navbar-dark bg-primary mb-2">
                    <a class="navbar-brand" href="#">Light text</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarColor02">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#" title="Current breakpoint tier">
                                    Tier     
                                    <span class="d-xl-inline d-none">XL</span>
                                    <span class="d-lg-inline d-xl-none d-none">LG</span>
                                    <span class="d-md-inline d-lg-none d-none">MD</span>
                                    <span class="d-sm-inline d-md-none d-none">SM</span>
                                    <span class="d-inline d-sm-none">XS</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">About</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <nav class="navbar navbar-expand-md navbar-light bg-primary mb-3">
                    <a class="navbar-brand" href="#">Dark text</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarColor03">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">About</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <hr>
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#tab1" data-toggle="tab">Tab</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tab2" data-toggle="tab">Tab</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tab3" data-toggle="tab">Tab</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#tab4" data-toggle="tab">Disabled</a>
                    </li>
                </ul>
                <div class="tab-content px-1 pt-3">
                    <div class="tab-pane active" id="tab1">
                        Select a palette, change the <span class="text-primary toggles-ignore">primary</span>, <span class="text-secondary toggles-ignore">secondary</span>, 
                        <span class="text-success toggles-ignore">success</span>, <span class="text-danger toggles-ignore">danger</span>, 
                        <span class="text-info toggles-ignore">info</span>, and <span class="text-warning toggles-ignore">warning</span> colors. 
                        Choose from various Google Fonts, and modify most of the Bootstrap SASS variables. Click to generate your completely custom 
                        Bootstrap theme.
                    </div>
                    <div class="tab-pane" id="tab2">
                        The whole idea is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. 
                        For most users it's designed to be point-and-click, while advanced users can delve into the SASS as desired. It's a 4-step process.
                    </div>
                    <div class="tab-pane" id="tab3">3. Put some more content in your pane here.</div>
                </div>
            </div>
            <div class="col-xl-3 pb-4">
                <ul class="nav nav-pills flex-column mb-3">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" data-toggle="popover" data-trigger="hover" data-placement="top" data-title="Primary color" data-content="Links and 'active' elements always use the primary color.">Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
    
                <div class="btn-group mb-3 w-100">
                    <button type="button" class="btn btn-primary btn-block">Dropdown</button>
                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Link</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="jumbo" class="container pb-5">
        <div class="d-flex my-3">
            <div class="jumbotron w-100 py-5 mx-auto">
                <h1>Whoot!strap</h1>
                <h4>Theming Companion for Bootstrap</h4>
                <p class="lead">
                    Rapidy build custom themes for Bootstrap, the world's most 
                    popular front-end component library for mobile-first, 
                    responsive Web apps. Whootstrap is a customizer and theme creator for Bootstrap. 
                    Choose from a huge collection of color palettes, fonts and SASS variables. Prototype different styles, and 
                    easily generate CSS from SASS to give your projects a unique look-and-feel.
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 mb-4">
                <div class="card border-primary h-100">
                    <div class="card-body d-flex flex-column align-items-start">
                        <h4 class="card-title text-primary">Card Outline</h4>
                        <p class="card-text">Whoot!strap makes it easy to customize this, and other free Bootstrap 4 themes for your downloading pleasure.</p>
                        <a href="#" class="btn btn-primary mt-auto">Button</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4">
                <div class="card border-primary h-100">
                    <div class="card-body">
                        <div class="list-group">
                          <a href="#" class="list-group-item list-group-item-action active">Dis List Group</a>
                          <a href="#" class="list-group-item list-group-item-action">Who they fire?</a>
                          <a href="#" class="list-group-item list-group-item-action">Why the first?</a>
                          <a href="#" class="list-group-item list-group-item-action disabled">When that fair?</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4">
                <div class="card bg-primary text-white h-100">
                    <div class="card-body d-flex flex-column align-items-start">
                        <h4 class="card-title">Card</h4>
                        <p class="card-text">Watch me scale, scale. Now watch me stack, stack. Watch me scale, scale...</p>
                        <a href="#" class="btn btn-primary border-white mt-auto">Button</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="modals" class="container pb-5">
        <div class="row">
            <div class="col-md-12">
                <div class="container-fluid">
                    <div id="myModal" class="modal d-block alert alert-dismissable" tabindex="-1" role="dialog" aria-hidden="true" style="position: relative; z-index: 1000">
                        <!-- this modal uses an alert dismiss hack for demo only - normally data-dismiss="modal" is used -->
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3>Modal</h3>
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                </div>
                                <div class="modal-body">
                                    <p>This is a basic Bootstrap 4 modal. The modal also comes in a <a href="#modal-sm" data-toggle="modal">smaller</a> and <a href="#modal-lg" data-toggle="modal">larger</a> sizes.</p>
                                    <p>
                                        What will you put in your modal? Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                        in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn" data-dismiss="alert" aria-hidden="true">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
            </div>
            <div class="col-md-9"></div>
        </div>
    </section>
    <section id="typography" class="container pb-5">
        <div class="row">
            <div class="col-xl-4">
                <h6>Heading 6</h6>
                <h5>Heading 5</h5>
                <h4>Heading 4</h4>
                <h3 class="text-truncate">Heading 3</h3>
                <h2 class="text-truncate">Heading 2</h2>
                <h1 class="text-truncate">Heading 1</h1>
                <p class="lead">Lead</p>
                <p>Paragraph</p>
            </div>
            <div class="col-xl-8 text-right">
                <p class="display-4 text-truncate">Display 4</p>
                <p class="display-3 text-truncate">Display 3</p>
                <p class="display-2 text-truncate">Display 2</p>
                <p class="display-1 text-truncate">Display 1</p>
            </div>
        </div>
    </section>
    <section id="forms" class="container pb-5">
        <div class="row">
            <div class="col-md-12">
                <form role="form">
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label form-control-label text-muted">First</label>
                        <div class="col-md-4">
                            <input class="form-control" type="text" value="Jane">
                        </div>
                        <label class="col-md-1 col-form-label form-control-label text-muted">Last</label>
                        <div class="col-md-5">
                            <input class="form-control" type="text" value="Bishop">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-lg-2 col-form-label form-control-label text-muted">Address</label>
                        <div class="col-lg-10">
                            <input class="form-control" type="text" placeholder="Street">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-lg-2 col-form-label form-control-label text-muted"></label>
                        <div class="col-lg-6">
                            <input class="form-control" type="text" placeholder="City">
                        </div>
                        <div class="col-lg-4">
                            <select class="form-control">
                                <option>State</option>
                                <option>AK</option>
                                <option>AZ</option>
                                <option>CA</option>
                                <option>CO</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row was-validated">
                        <label class="col-lg-2 col-form-label form-control-label text-muted">Username</label>
                        <div class="col-lg-10">
                            <input class="form-control" type="text" required="" id="un" name="un">
                            <div class="invalid-feedback">
                              Username is required.
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-lg-2 col-form-label form-control-label"></label>
                        <div class="col-lg-10">
                            <input type="reset" class="btn btn-outline-secondary mr-2" value="Cancel">
                            <input type="button" class="btn btn-primary mr-2" value="Submit">
                            <div class="custom-control custom-checkbox d-inline">
                              <input type="checkbox" class="custom-control-input" id="customCheck" checked>
                              <label class="custom-control-label" for="customCheck">Check me out</label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <section id="grid" class="container pb-5">
        <p class="lead">The rows &amp; columns of the world famous Bootstrap grid speak for themselves.</p>
        <div class="row">
            <div class="col-sm-6">
                6
            </div>
            <div class="col-6">
                <div class="card my-1 bg-light">6</div>
            </div>
            <div class="col-sm-5">
                5
            </div>
            <div class="col-7">
                <div class="card my-1">7</div>
            </div>
            <div class="col-sm-4">
                4
            </div>
            <div class="col-8">
                <div class="card my-1">8</div>
            </div>
            <div class="col-sm-3">
                3
            </div>
            <div class="col-9">
                <div class="card my-1">9</div>
            </div>
            <div class="col-sm-2">
                2
            </div>
            <div class="col-10">
                <div class="card my-1">10</div>
            </div>
            <div class="col-sm-1">
                1
            </div>
            <div class="col-11">
                <div class="card my-1">11</div>
            </div>
        </div>
    </section>
    <section id="more" class="container pb-5">
        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-hover table-sm">
                        <tbody>
                            <tr>
                                <th class="w-25">Location</th>
                                <th class="w-50">Date</th>
                                <th class="w-25">Visits</th>
                            </tr>
                            <tr>
                                <td>Westfield</td>
                                <td>08.05.18 <span class="badge badge-primary">badge</span></td>
                                <td>2323</td>
                            </tr>
                            <tr>
                                <td>Galway</td>
                                <td>08.05.18 <span class="badge badge-primary">badge-pill</span></td>
                                <td>5362</td>
                            </tr>
                            <tr class="table-primary">
                                <td>Bern</td>
                                <td>08.05.18</td>
                                <td>153</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="w-100 my-4"></div>
            <div class="col-md-6">
                <a href="#" class="text-primary" data-toggle="tooltip" data-placement="right" title="This tooltip is on the right.">Right tooltip (hover)</a>
                <br>
                <a href="#" class="text-primary" data-toggle="tooltip" data-placement="bottom" title="This tooltip is on the bottom.">Bottom tooltip (hover)</a>
                <br>
            </div>
            <div class="col-md-6 text-right">
                <button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Toggle my popover</button>
            </div>
            <div class="w-100 my-4"></div>
            <div class="col-md-12">
                <div class="progress mb-2">
                    <div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="alert alert-primary alert-dismissable show fade" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <strong>Well done!</strong> You successfully read this important alert message.
                </div>
            </div>
            <div class="w-100 my-4"></div>
    
        </div>
    </section>
</main>
<footer id="footer" class="bg-dark text-light py-5">
    <div class="container py-5">
        <div class="row">
            <div class="col-6 col-md-6 col-lg-3 mb-2">
                <h6 class="text-uppercase">Tools</h6>
                <ul class="nav flex-column">
                    <li><a class="text-white" target="ext" href="http://whootstrap.themes.guide">Whootstrap</a></li>
                    <li><a class="text-white" target="ext" href="http://themes.guide">Themes.guide</a></li>
                    <li><a class="text-white" target="ext" href="http://codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a></li>
                    <li><a class="text-white" target="ext" href="http://bootply.com">Bootply</a></li>
                </ul>
            </div>
            <div class="col-6 col-md-6 col-lg-3 mb-2">
                <h6 class="text-uppercase">More</h6>
                <ul class="nav flex-column">
                    <li><a class="text-white" target="_new" href="http://wdstack.com" title="The top projects, tools and apps for Web developers">WDStack</a></li>
                    <li><a class="text-white" target="_new" href="http://theme.cards">Theme.cards</a></li>
                    <li><a class="text-white" target="_new" href="http://www.bootbundle.com">BootBundle</a></li>
                    <li><a class="text-white" target="_new" title="Learn about Bootstrap 4 using this free theme" href="http://bootstrap4.guide">Bootstrap4.guide</a></li>
                </ul>
            </div>
            <div class="col-12 col-md-12 col-lg-6 mb-2 text-right">
                <h6 class="text-uppercase">Follow</h6>
                <ul class="nav float-right">
                    <li><a class="text-white mr-1" rel="nofollow" href="http://twitter.com/whootstrap" title="Follow on Twitter"><i class="h1 fa fa-fw fa-twitter fa-2x ion-social-twitter-outline"></i></a></li>
                    <li><a class="text-white mr-1" rel="nofollow" href="https://www.facebook.com/codeply" title="Follow on Facebook"><i class="h1 fa fa-fw fa-facebook fa-2x ion-social-facebook-outline"></i></a></li>
                    <li><a class="text-white" href="https://medium.com/wdstack" title="Follow on Medium"><i class="h1 fa fa-fw fa-medium fa-2x ion-social-medium-outline"></i></a></li>
                </ul>
            </div>
        </div>
        <!--/row-->
    </div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>